<!--
 * @Description:
 * @version:
 * @Author: 娃哈哈
 * @Date: 2024-12-20 19:07:07
-->
<template>
    <div class="popup animate__animated animate__zoomIn"
        :class="[!isCenterLong && !container ? 'popup-basic' : 'popup-center-long']" :style="{
            'z-index': 100100 + type,
            left: position?.left ? position.left : ''
        }" v-move>
        <div class="boder"
            :class="[isCenterLong ? 'boder-bg-center-long' : container ? 'boder-bg-container' : 'boder-bg-basic']">
            <div class="title">
                <div class="icon-text">
                    <div class="left-img">
                        <img src="@/assets/img/popup-title-left.png" alt="" />
                    </div>
                    <h2 class="YouSheBiaoTiHei-2 size-four">{{ title }}</h2>
                    <div class="left-img">
                        <img src="@/assets/img/popup-title-right.png" alt="" />
                    </div>
                </div>
                <img @click.stop="close" src="@/assets/img/close.png" alt="" class="after" />
            </div>
            <div class="popup-content">
                <slot name="default"></slot>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { inject, ref, Directive, computed, watch } from 'vue';
const props = defineProps({
    // 根据type设置弹窗层级
    type: {
        type: Number,
        default: 0
    },
    // 弹窗标题
    title: {
        type: String,
        default: ''
    },
    // 弹窗位置
    position: {
        type: Object,
        default: () => { }
    },
    /**
     * 居中弹窗
     */
    isCenterLong: {
        type: Boolean,
        default: false
    },
    /**
     * 居中最大弹窗
     */
    container: {
        type: Boolean,
        default: false
    }
});
// 关闭弹窗
const emit = defineEmits<{
    (event: 'closePopup', popupData: { [key: string]: any }): void
}>()
const showPopup = inject('showPopup') as (data: {
    show: boolean;
    type: number;
}) => void;
const close = () => {
    emit('closePopup', { show: false, type: props.type })
    if (showPopup) {
        showPopup({ show: false, type: props.type });
    }
};
/**
 * 监听参数确保后面出来的弹窗层级更高
 */
watch(
    () => props.type,
    () => {
        if (props.type) {
            const type = localStorage.getItem('popupType') || '1'
            const popupType = parseInt(type) + 1
            localStorage.setItem('popupType', `${popupType}`)
        }
    },
    {
        deep: true,
        immediate: true
    }
)

const type = computed(() => {
    const type = localStorage.getItem('popupType')
    return type ? parseInt(type) + 1 : props.type
})

const vMove: Directive<any, void> = (el: HTMLElement) => {
    let moveElement = el.firstElementChild as HTMLElement;
    function mouseDown(e: MouseEvent) {
        let X = e.clientX - el.offsetLeft;
        let Y = e.clientY - el.offsetTop;
        function mouseMove(e: MouseEvent) {
            el.style.left = e.clientX - X + 'px';
            el.style.top = e.clientY - Y + 'px';
        }
        document.addEventListener('mousemove', mouseMove);
        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', mouseMove);
        });
    }
    moveElement.addEventListener('mousedown', mouseDown);
};
</script>

<style scoped lang="less">
.title {
    position: relative;
    display: flex;
    height: 52px;
    line-height: 52px;
    text-align: center;

    .icon-text {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .left-img {}

        h2 {
            margin: 0 10px;
            font-size: 27px;
            letter-spacing: 5px;
            font-weight: 400;
        }
    }

    .after {
        position: absolute;
        right: 0;
        top: 10px;
        width: 29px;
        height: 28px;
        overflow: hidden;
        cursor: pointer;
    }
}

.popup {
    position: absolute;
    top: 50%;
    cursor: pointer;
}

.popup-basic {
    transform: translateY(-50%);
}

.popup-center-long {
    transform: translate(-50%, -50%);
}

.boder {
    padding: 15px 25px;
    box-sizing: border-box;
    background-color: rgba(17, 31, 60, 0.9);
    overflow: hidden;
    .popup-content{
        height: calc(100% - 52px);
    }
}

.boder-bg-basic {
    width: 520px;
    height: 545px;
    background: url('@/assets/img/popupBoder.png') no-repeat 50%;
}

.boder-bg-center-long {
    width: 837px;
    height: 358px;
    background: url('@/assets/img/zhylhdjl.png') no-repeat 50%;
}
.boder-bg-container{
    width: 1216px;
    height: 625px;
    background: url('@/assets/img/streetInspectorBoder.png') no-repeat 50%;
}
.HealthPortrayal {
    left: 15%;
}

.ExponentSpecification {
    left: 32%;
}

.CompanyDetail {
    left: 49%;
}

.ListOfSupervisors {
    left: 66%;
}

.imgtextAlist {}

.CellList {
    left: 10%;
}

.companyList {
    left: 29%;
}

.CaseDetail {
    left: 30%;
}

.CaseList {
    left: 53%;
}
</style>